<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<!-- 依 赖 样 式-->
	<link rel="stylesheet" href="/static/component/pear/css/pear.css" type="text/css"/>
	<link rel="stylesheet" href="/static/index/user/assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
	<!-- 样 式 文 件 -->
	<link rel="stylesheet" href="/static/admin/css/login/index.css" />
	<link rel="stylesheet" href="/static/admin/css/login/variables.css" />
	<style>
			.codeImage {
				position: absolute;
    			right: 0;
    			top: 0;
                height: 40px;
                
                border: #e6e6e6 1px solid;
            }
            #geetest_captcha{
                width: 100%;
            }

		    svg{
		        display: none;
		    }
		    .geetest_captcha.geetest_customTheme .geetest_holder, .geetest_popup_wrap.geetest_customTheme .geetest_holder{
		        width:100%;
		    }
	</style>
</head>

<body>
	<div class="login-page" style="background-image: url(/static/admin/images/background.svg)">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="/static/admin/images/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<form class="layui-form" action="javascript:void(0);">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<span>YPay Admin</span>
							</div>
							<div class="top-desc">
								一个专业的系统开发商,用心创造每一款产品
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input lay-verify="required" placeholder="账户" autocomplete="off"
										name="username" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input type="password" name="password" value=""
											lay-verify="required|confirmPassword" placeholder="密码" autocomplete="off"
											class="layui-input" lay-affix="eye">
									</div>
								</div>
								{if getConfig()['isAdminSecurity'] == 1}
								<div class="layui-form-item">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input lay-verify="required"  placeholder="谷歌验证码"  name="googleCode" autocomplete="off"
												class="layui-input">
										</div>
								</div>
									{/if}
									{if getConfig()['captcha-type'] == 1}
									<div class="layui-form-item">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input lay-verify="required" maxlength="4" name="captcha" placeholder="验证码" autocomplete="off"
												class="layui-input">
										</div>
									</div>
									<img id="codeimg" class="codeImage" style="cursor: pointer;"/>
								</div>
									{elseif condition="getConfig()['captcha-type'] == '2'"}
<!-- 动态引入验证码JS示例 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<div class="mb-3" id='tencentCaptcha'><button type="button" class="TencentCaptcha btn btn-label-info w-100" id="TencentCaptcha" -appid="{:getConfig()['tencent_CaptchaAppId']}" data-cbfn="qq_captcha_callback" lay-filter="qq_captcha_callback" lay-submit><span c="spinner-grow spinner-grow-sm text-primary mr-2" role="status" aria-hidden="true"></span>&nbsp;点击按钮进行验证</button></div>
{elseif condition="getConfig()['captcha-type'] == '3' "}
<script src="https://static.geetest.com/v4/gt4.js"></script>
<div class="mb-3" id='geetest_captcha' style="width: 100%;"></div>
{/if}
							
								<div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" name="remember" lay-skin="primary" title="自动登录">
										</div>
									</div>
								</div>
								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login" >登 录</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
        {include file="public/footer"/}
		<script>
			layui.use(['form', 'layer', 'jquery', 'element'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					form = layui.form;
				// 登 录 提 交
				form.on('submit(login)', function(data) {
    // 保留原始数据提交结构
    const postData = data.field; 
    
    // 增加基础校验
    if (!postData.username || !postData.password) {
        return layer.msg('账号密码不能为空', {icon: 2});
    }

    layer.load();
    
    // 保留原始ajax配置
    $.ajax({
        type: "POST",
        data: postData, // 保持数据结构不变
        success: function(res) {
            layer.closeAll('loading');
            
            // 兼容性响应处理
            try {
                if (res.code == 200) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        // 保留原始跳转逻辑
                        let redirectUrl = '{$Request.root??"/"}';
                        // 防止双斜杠路径
                        if (redirectUrl.endsWith('/')) {
                            redirectUrl = redirectUrl.slice(0, -1);
                        }
                        location.href = redirectUrl;
                    });
                } else {
                    layer.msg(res.msg || '登录失败', {icon: 2});
                    // 安全调用初始化方法
                    if (typeof initCode === 'function') initCode();
                }
            } catch (e) {
                console.error('响应处理异常:', e);
                layer.msg('数据处理失败', {icon: 2});
            }
        },
        error: function(xhr) {
            layer.closeAll('loading');
            // 保留原始错误处理方式
            layer.msg('请求失败: ' + xhr.statusText, {icon: 2});
        }
    });
    return false;
});
				initCode();

				function initCode() {
					$('#codeimg').attr("src", "{$Request.root}/login/verify?data=" + new Date().getTime());
				}
				$('#codeimg').on('click', function() {
					initCode();
				});
				
				form.on('submit(qq_captcha_callback)', function() {

					// 定义回调函数
                    function callback(res) {
                        // 第一个参数传入回调结果，结果如下：
                        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
                        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
                        // CaptchaAppId       String    验证码应用ID。
                        // bizState    Any       自定义透传参数。
                        // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
                        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                        // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number,     errorMessage: "String"}
                        // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
                        if (res.ret === 0) {
                            $.post('/User/Captcha',res, function(res) {
					    	if (res.code == 200) {
	                           $('#tencentCaptcha').html('<button type="button" class="TencentCaptcha btn  w-100" id="TencentCaptcha" data-appid ="{:getConfig()['tencent_CaptchaAppId']}" data-cbfn="qq_aptcha_callback" disabled="disabled" style="background-color: rgb(139,  195, 74); color: rgb(255, 255, 255);"><i class="fa-solid fa-circle-check"></i> &nbsp;验证通过</button>');
					    	}
					    }, 'json');
					    return false;
                            // // 复制结果至剪切板
                            // var str = '【randstr】->【' + res.randstr + '】      【ticket】->【' + res.ticket + '】';
                            // var ipt = document.createElement('input');
                            // ipt.value = str;
                            // document.body.appendChild(ipt);
                            // ipt.select();
                            // document.execCommand("Copy");
                            // document.body.removeChild(ipt);
                        }
                    }

                    // 定义验证码js加载错误处理函数
                    function loadErrorCallback() {
                        var appid = ''
                         // 生成容灾票据或自行做其它处理
                        var ticket = 'terror_1001_' + appid + Math.floor(new Date().getTime() / 1000);
                        callback({
                          ret: 0,
                          randstr: '@'+ Math.random().toString(36).substr(2),
                          ticket,
                          errorCode: 1001,
                          errorMessage: 'jsload_error',
                        });
                    }
                
                	try {
                           // 生成一个验证码对象
                           // CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
                           //callback：定义的回调函数
                           var captcha = new TencentCaptcha('{:getConfig()['tencent_CaptchaAppId']}', callback, {});
                           // 调用方法，显示验证码
                           captcha.show(); 
                     } catch (error) {
                     // 加载异常，调用验证码js加载错误处理函数
                           loadErrorCallback();
                    }  
				});
      
        {if condition="getConfig()['captcha-type'] == '3' "}
				//极验行为验证
				initGeetest4({
                    captchaId: '{:getConfig()['geetest_CaptchaAppId']}',
                },function (captcha) {
                    // captcha为验证码实例
                    captcha.appendTo("#geetest_captcha");// 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
                    captcha.onSuccess(function () {
                        var result = captcha.getValidate();
					   $.post('/User/Captcha', result , function(res) {
					           	console.log(res);
                         }).onError(function(){
                             //your code
                            });
                        });
                });
				{/if}
			})
		</script>
</body>

</html>
